<template>
  <d2-container>
    <div class="row-ac pb-2">
      <div><el-button type="warning" @click="addProduct" size="small" icon="el-icon-plus">添加产品</el-button></div>
      <div class="ml-2"><el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button></div>
    </div>
    <div class="d-f">
      <div class="category-tree">
        <div class="category-tree-title font-s-2 flex-1 row text-white">产品分类列表</div>
        <div class="flex-1 mt-2">
          <el-tree :data="categoriesTree" :props="defaultProps" accordion @node-click="handleNodeClick">
          </el-tree>
        </div>
      </div>
      <div class="flex-1 ml-2">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="商品列表" name="first">
            <el-table :data="productList" border stripe>
              <el-table-column align="center" type="selection" width="45" />
              <el-table-column align="center" label="序号" type="index" width="45" />
              <el-table-column align="center" label="图片" prop="image" width="80">
                <template slot-scope="scope">
                  <el-popover placement="right" trigger="hover"
                    v-if="scope.row.image_list && scope.row.image_list !== '' && scope.row.image_list[0]">
                    <el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.image_list[0].url"
                      fit="cover" />
                    <el-image style="width: 220px; height: 220px" :src="scope.row.image_list[0].url" fit="cover" />
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商品名称" prop="product_name" width="180" />
              <el-table-column align="center" label="所属分类" prop="category_name" width="70" />
              <el-table-column align="center" label="售价" prop="price" width="70" />
              <el-table-column align="center" label="市场价" prop="mar_price" width="70" />
              <el-table-column align="center" label="库存" prop="inventory" width="70" />
              <el-table-column align="center" label="商品状态" prop="product_state" width="70">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.product_state == 0" type="success">正常</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="230">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
                  <el-button size="mini" @click="openPatch(scope.row.id, 1)">下架</el-button>
                  <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="回收站" name="offShelf">
            <el-table :data="productList" border stripe>
              <el-table-column align="center" type="selection" width="45" />
              <el-table-column align="center" label="序号" type="index" width="45" />
              <el-table-column align="center" label="图片" prop="image" width="150">
                <template slot-scope="scope">
                  <el-popover placement="right" trigger="hover"
                    v-if="scope.row.image_list && scope.row.image_list !== '' && scope.row.image_list[0]">
                    <el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.image_list[0].url"
                      fit="cover" />
                    <el-image style="width: 220px; height: 220px" :src="scope.row.image_list[0].url" fit="contain" />
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商品名称" prop="product_name" width="180" />
              <el-table-column align="center" label="所属分类" prop="category_name" width="70" />
              <el-table-column align="center" label="售价" prop="price" width="70" />
              <el-table-column align="center" label="市场价" prop="mar_price" width="70" />
              <el-table-column align="center" label="库存" prop="inventory" width="70" />
              <el-table-column align="center" label="商品状态" prop="product_state" width="70">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.product_state == 1" type="danger">已下架</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="添加时间" prop="create_time" width="150" />
              <el-table-column align="center" label="操作" width="230">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
                  <el-button size="mini" @click="openPatch(scope.row.id, 0)">上架</el-button>
                  <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="草稿箱" name="drafts">
            <el-table :data="productList" border stripe>
              <el-table-column align="center" type="selection" width="45" />
              <el-table-column align="center" label="序号" type="index" width="45" />
              <el-table-column align="center" label="图片" prop="image" width="150">
                <template slot-scope="scope">
                  <el-popover placement="right" trigger="hover"
                    v-if="scope.row.image_list && scope.row.image_list !== '' && scope.row.image_list[0]">
                    <el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.image_list[0].url"
                      fit="cover" />
                    <el-image style="width: 220px; height: 220px" :src="scope.row.image_list[0].url" fit="contain" />
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商品名称" prop="product_name" width="180" />
              <el-table-column align="center" label="所属分类" prop="category_name" width="70" />
              <el-table-column align="center" label="售价" prop="price" width="70" />
              <el-table-column align="center" label="市场价" prop="mar_price" width="70" />
              <el-table-column align="center" label="库存" prop="inventory" width="70" />
              <el-table-column align="center" label="商品状态" prop="product_state" width="70">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.product_state == 2" type="danger">草稿箱</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="添加时间" prop="create_time" width="150" />
              <el-table-column align="center" label="操作" width="230">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
                  <el-button size="mini" @click="openPatch(scope.row.id, 0)">上架</el-button>
                  <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="flex-1 ml-2 mt-2">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="productTotal">
          </el-pagination>
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {
    productCategoriesTreeUrl,
    productPatchUrl,
    productListUrl,
    productDeleteUrl,
    productCreateUrl
  } from '@/utils/product'
  import {
    patch
  } from '@/utils/request'
  import util from '@/libs/util.js'
  export default {
    name: 'product',
    data() {
      return {
        categoriesTree: [],
        defaultProps: {
          children: 'children',
          label: 'category_name'
        },
        activeName: 'first',
        productList: [],
        productTotal: 0,
        queryInfo: {
          merchant_id: util.cookies.get('merchantId'),
          category_id: '',
          product_state: 0,
          page: 1,
          page_size: 10
        },
        queryInfoCategories: {
          page: 1,
          page_size: 10
        },
        form: {
          product_name: '',
          sub_name: '',
          category: '',
          brand: '',
          image_list: [],
          price: 0,
          mar_price: 0,
          inventory: 0,
          sales_volume: 0,
          follow: 0,
          is_recommend: false,
          is_hot: false,
          is_new: false,
          sort: 1,
          details: '',
          product_state: 2,
          merchant:util.cookies.get('merchantId')
        },
      }
    },
    created() {
      this.initData()
      this.shopInfo = JSON.parse(util.cookies.get('shopInfo'))
      console.log('商家详情', this.shopInfo);
    },
    methods: {
      initData() {
        this.getCategoriesTree()
        this.getproductList()
      },
      getCategoriesTree() {
        this.$get(productCategoriesTreeUrl, this.queryInfoCategories).then(res => {
          this.categoriesTree = [{
            id: '',
            category_name: '全部分类'
          }, ...res.data.data.list]
          this.treeTotal = res.data.data.total
        })
      },
      getproductList() {
        this.$get(productListUrl, this.queryInfo).then(res => {
          this.productList = res.data.data.list
          this.productTotal = res.data.data.total
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.pageSize = newSize
        this.getproductList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getproductList()
      },
      handleNodeClick(data) {
        this.queryInfo.category_id = data.id
        this.getproductList()
      },
      openPatch(productId, num) {
        this.$confirm('此操作将修改商品状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleState(productId, num)
        })
      },
      handleState(productId, num) {
        patch(productPatchUrl + productId + '/', {
          product_state: num
        }).then(res => {
          console.log(res);
          this.getproductList()
        });
      },
      handleClick(tab, event) {
        if (tab.paneName == 'first') {
          this.queryInfo.product_state = 0
        } else if (tab.paneName == 'offShelf') {
          this.queryInfo.product_state = 1
        } else if (tab.paneName == 'drafts') {
          this.queryInfo.product_state = 2
        }
        this.getproductList()
      },
      openDelete(productId) {
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 在确定时执行handleDelete的删除
          this.handleDelete(productId);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleDelete(productId) {
        this.$del(productDeleteUrl + productId + '/').then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getproductList()
          }
        })
      },
      addProduct() {
        this.$post(productCreateUrl, this.form).then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data.id);
            this.productId = res.data.data.id
            this.$router.push({
              path: '/addProduct',
              query: {
                productId: this.productId
              }
            });
          }
        })
      },
      // addProduct() {
      //   this.$router.push('/addProduct');
      // },
      handleEdit(productId) {
        this.$router.push({
          path: '/addProduct',
          query: {
            productId: productId // 添加第二个参数
          }
        });
      }
    }
  }
</script>
<style lang="scss">
  .category-tree-title {
    height: 38px;
    min-height: 38px;
    background-color: #62A8D1;
  }

  .category-tree {
    width: 13%;
  }

  .el-tree-node__content {
    height: 46px;
  }
  
  .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 118px;
    height: 118px;
    cursor: pointer;
    line-height: 118px;
    vertical-align: top;
  }
  
  .el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 118px !important;
    height: 118px !important;
    margin: 0 8px px 8px 0;
    display: inline-block;
  }
</style>
